<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{margin:0;padding:0;}
        #parentDiv{position:relative;margin:20px auto;padding-top:10px;width:500px;height:400px;overflow-y:scroll;overflow-x:scroll;border:3px solid #afa;}
        #child{position:absolute;top:10px;width:1000px;height:400px;background:#faf;}
    </style>
</head>
<body>
    <div id="parentDiv" onclick="alert('hello')">
        <div id="child"></div>
    </div>
    <script>
        var parentDiv = document.getElementById('parentDiv');
        var child = document.getElementById('child');


        function miniplClassName(originalStr,newValue,removeValue){
            if (originalStr.indexOf(removeValue)==-1){
                originalStr = addClass(originalStr,newValue);
                return originalStr;
            }else{
                var newStr = removeClass(originalStr,removeValue);
                originalStr = newStr + ' ' + newValue ;
                return originalStr;
            }
            function removeClass(){
                return originalStr.replace(removeValue,'');
            }
            function addClass(){
                return originalStr = originalStr + ' ' + newValue;
            }
        }
        String.prototype.removeStr = function(v){
            var s = this.valueOf();
                if (s.length>0){
                    var a  = s.split(' ');
                    for(var i=0;i<a.length;i++){
                        if (a[i] == v){
                            delete a[i];
                        }
                    }
                    s = a.join(' ');
                }
                //console.log(s);
                return s;
        }

        var str = 'aaaa bbbb cccc dddd';
        str = miniplClassName(str,'eeee','aaaa');
        var mystr = str.removeStr('cccc');

    </script>
</body>
</html>